<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../01 tab栏切换（addClass.removeClass）/js/jquery.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .box1{
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- <button>创建</button> -->
    <!-- <ul>
        <li>我是li01</li>
        <li>我是li02</li>
        <li>我是li03</li>
        <li>我是li04</li>
        <li>我是li05</li>
    </ul> -->
    <button>清空</button>
    <button>删除</button>
    <div class="box">
        <div class="box1"></div>
    </div>
    <script>
        $(function(){
            // $('button').click(function(){
            //     let oDiv=$('<div class="box"></div>'); 
            //     //在父类后面加
            //     // $('body').append(oDiv);
            //    // 子类去父类
            //     // oDiv.appendTo('body');
            //     //在父类前面加
            //     // $('body').prepend(oDiv);
            //     oDiv.prependTo('body');
            // })
            // $(function(){
            //     $('li').css('list-style','none')
            //     $('button').click(function(){
            //         // $('li').eq(2).after('<div>123</div>');
            //         $('li').eq(2).before('<div>132</div>');
            //     })
            // })
            // $('.box').click(function(){
            //     alert('000');
            // })
            // //浅克隆会克隆子元素
            // $('button').eq(0).click(function(){
            //     $('.box').clone(false).appendTo('body');
            // })
            // //深克隆会克隆事件
            // $('button').eq(1).click(function(){
            //     $('.box').clone(true).prependTo('body');
            // })

            $('button').eq(0).click(function(){
                // $('.box').empty();
                // $('.box').html('');
                $('.box').text('');
            })
            $('button').eq(1).click(function(){
                $('.box').remove();
            })
        })
    </script>
</body>
</html>